<template>
  <div v-loading="loading" class="app-container check_order_result">
    <div class="header_title_box">
      <h2>基本信息</h2>
    </div>
    <el-form :ref="formName" :model="formFieldsData" label-width="100px">
      <div class="select_form_box">
        <div class="filter-container">
          <el-row :gutter="69">
            <el-col :span="6" :offset="0">
              <el-form-item label="盘库单号" prop="code">
                <el-input v-model="formFieldsData.code" placeholder="请输入盘库单号" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="盘库名称" prop="name">
                <el-input v-model="formFieldsData.name" placeholder="请输入盘库名称" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="实体仓" prop="warehouse">
                <el-input v-model="formFieldsData.warehouse" placeholder="请输入备注说明" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="备注说明" prop="notes">
                <el-input v-model="formFieldsData.notes" placeholder="请输入备注说明" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 商品信息 -->
      <div class="header_title_box">
        <h2>商品明细信息</h2>
      </div>
      <div v-loading="loading" class="warehouse_order_add_products">
        <el-table :data="formFieldsData.products" border fit>
          <el-table-column v-if="!type" key="opretion" label="操作" align="center" width="135">
            <template slot-scope="scope">
              <span class="edit_style" style="margin: 0;" @click="showResultDialog(scope.row)">编辑盘点结果</span>
            </template>
          </el-table-column>
          <el-table-column key="image_url" label="缩略图" prop="image_url" align="center" width="148">
            <template slot-scope="scope">
              <thund :img="scope.row.image_url | shopThund" />
            </template>
          </el-table-column>
          <el-table-column key="code" label="系统sku" prop="goods_code" align="center" width="182" />
          <el-table-column key="name_ch" label="中文名称" prop="goods_name_ch" align="center" width="208" />
          <el-table-column key="name_en" label="英文名称" prop="goods_name_en" align="center" width="258" />
          <el-table-column key="packing_method" label="包装类型" prop="packing_method" align="center" width="167" />
          <el-table-column key="category_name" label="商品分类" prop="category_name" align="center" width="203" />
          <el-table-column key="number" label="即时库存" prop="number" align="center" width="205" />
          <el-table-column key="check_stock" label="盘点库存" align="center" width="205">
            <template slot-scope="scope">
              <el-form-item :prop="`products.${ scope.$index }.check_stock`" :disabled="type === 'info'" label-width="0" class="mt22" :rules="numberRule">
                <el-input-number v-model="scope.row.check_stock" :min="0" :disabled="type === 'info'" :precision="0" :max="9999999999" placeholder="手工输入" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column key="number1" label="差异库存" prop="number" align="center" width="205">
            <template slot-scope="scope">
              <span>{{ scope.row.check_stock - (scope.row.number || 0) }}</span>
            </template>
          </el-table-column>
          <el-table-column key="number2" label="盘库结果" align="center" width="205">
            <template slot-scope="scope">
              <span>{{ scope.row.check_stock - scope.row.number > 0 ? '盘赢' : (scope.row.check_stock - scope.row.number < 0) ? '盘亏' : '正常' }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
    <div class="dialog-footer-center">
      <span>
        <el-button v-if="type !== 'info'" type="primary" :loading="btnLoading" @click="handleSubmit">保存</el-button>
        <el-button :type="type !== 'info' ? 'default' : 'primary'" @click="handleCancel">{{ type !== 'info' ? '取消' : '返回' }}</el-button>
      </span>
    </div>
    <check-order-result-dialog ref="checkOrderResultDialog" />
  </div>
</template>

<script>
import thund from '@/components/base/thund'
import checkOrderResultDialog from '../../components/checkOrderResultDialog'
export default {
  name: 'CheckOrderResult',
  components: {
    thund,
    checkOrderResultDialog
  },
  data() {
    return {
      loading: false,
      info: {}, // 详情
      id: '', // id
      type: '',
      formName: 'checkOrderResult',
      formFieldsData: {
        code: '', // 盘库单号
        name: '', // 盘库名称
        warehouse: '', // 实体仓
        notes: '', // 备注说明
        products: []
      },
      numberRule: [
        { required: true, message: '请输入数量', trigger: ['change', 'blur'] }
      ],
      DICTIONARIES: {
        splitOrder: [
          {
            code: 1,
            name: '普通商品'
          },
          {
            code: 2,
            name: '多箱包装'
          }
        ]
      },
      btnLoading: false
    }
  },
  computed: {},
  created() {
    const vm = this
    vm.id = vm.$route.params.id
    vm.type = vm.$route.params.type
    vm.getInfo()
  },
  methods: {
    // 获取详情
    getInfo() {
      const vm = this
      vm.loading = true
      vm.$http
        .get(`/check-order/${vm.id}`)
        .then((res) => {
          vm.info = res.data
          vm.getProductList()
          vm.formFieldsData.code = vm.info.code
          vm.formFieldsData.name = vm.info.name
          vm.formFieldsData.warehouse = vm.info.warehouse
          vm.formFieldsData.notes = vm.info.notes
        })
        .catch(() => {
          vm.loading = false
        })
    },
    // 获取实体仓下商品列表
    getProductList() {
      const vm = this
      vm.$http
        .get(`/check-order/warehouse-goods/${vm.id}`)
        .then((res) => {
          vm.formFieldsData.products = res.data
          vm.loading = false
        })
        .catch(() => {
          vm.loading = false
        })
    },
    // 显示编辑弹窗
    showUpdateDialog() {},
    // 提交
    handleSubmit() {
      const vm = this
      const params = {
        id: vm.id,
        products: []
      }
      params.products = vm.formFieldsData.products.map((e) => {
        const obj = {
          goods_id: e.id, // id
          check_stock: e.check_stock, // 盘点库存
          stock: e.number,
          stock_difference: e.check_stock - e.number // 库存差异
        }
        return obj
      })
      vm.btnLoading = true
      vm.$http
        .post('/check-order/update-order-stock', params)
        .then((res) => {
          vm.$message.success('更新成功')
          vm.handleCancel()
          vm.btnLoading = false
        })
        .catch(() => {
          vm.btnLoading = false
        })
    },
    // 取消
    handleCancel() {
      const vm = this
      vm.$router.go(-1)
    },
    // 显示
    showResultDialog(info) {
      const vm = this
      vm.$refs['checkOrderResultDialog'].show({ id: vm.id, info })
    }
  }
}
</script>

<style lang="scss" scoped>
.check_order_result {
  .filter-container {
    border: none;
    padding-bottom: 0;
  }
}
</style>
